<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="filters.name" placeholder="内容"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="keywordQuery">关键字查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
		</el-col>

		<!--列表-->
    <template>
      <!--@selection-change="selsChange"选项改变会触发这个函数-->
      <el-table :data="Menus" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
        <!-- menu="selection"选项 -->
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column type="index" width="60">
        </el-table-column>
        <el-table-column prop="name" label="名称" width="90" sortable>
        </el-table-column>
        <el-table-column prop="component" label="组件路径" width="120" sortable>
        </el-table-column>
        <el-table-column prop="url" label="访问url" width="120" sortable>
        </el-table-column>
        <el-table-column prop="icon" label="图标" width="100" sortable>
        </el-table-column>
        <!--<el-table-column prop="index" label="排序索引" width="100" sortable>
        </el-table-column>-->
        <el-table-column prop="parent.name" label="父级菜单" width="100" sortable>
        </el-table-column>
        <el-table-column prop="intro" label="简介" width="90" sortable>
        </el-table-column>
        <el-table-column prop="state" label="状态" width="130" sortable>
          <template slot-scope="scope">
            <span v-if="scope.row.state==0" style="color: red">禁用</span>
            <span v-else="scope.row.state==1" style="color: green">正常</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="150">
          <template scope="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <!-- v-perm="'menu:delete'" -->
            <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>


    <!--工具条 批量删除-->
    <el-col :span="24" class="toolbar">
      <!--
        :disabled="this.sels.length===0" - 当选中的条数为0就禁用
        @click="batchRemove" - 单击事件调用batchRemove方法
      -->
      <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
      <el-pagination layout="prev, pager, next"
                     @current-change="currentChange"
                     :page-size="pageSize"
                     :total="totals"
                     :current-page="currentPage"
                     style="float:right;">
      </el-pagination>
    </el-col>

    <!--编辑界面 模态框-->
    <el-dialog :title="title" :visible.sync="editFormVisible" :close-on-click-modal="false">
      <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">

        <el-form-item label="名称" prop="name">
          <el-input v-model="editForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="组件路径" prop="component">
          <el-input v-model="editForm.component" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="访问url" prop="url">
          <el-input v-model="editForm.url" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <el-input v-model="editForm.icon" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="index">
          <!--<el-input v-model="editForm.index" auto-complete="off"></el-input>-->
          <template>
            <el-input-number v-model="editForm.index" controls-position="right"
                             @change="handleChange" :min="1" :max="10"></el-input-number>
          </template>
        </el-form-item>
        <el-form-item label="上级菜单" prop="parent">
          <el-cascader v-model="editForm.parent"
                       :options="menuTree"
                       :props="{
                checkStrictly: true,
                label: 'name', //级联框显示那个属性的值
                value: 'id'    //回显时需要,回传值的时候也需要
              }" clearable>
          </el-cascader>
        </el-form-item>
        <el-form-item label="简介" prop="intro">
          <el-input v-model="editForm.intro" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="state">
         <!-- <el-input v-model="editForm.state" auto-complete="off"></el-input>-->
          <el-radio-group v-model="editForm.state">
            <el-radio class="radio" :label="0">禁用</el-radio>
            <el-radio class="radio" :label="1">正常</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <!--<div slot="footer" class="dialog-footer">
        <el-button @click.native="editFormVisible = false">取消</el-button>
        <el-button menu="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
      </div>-->
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="editSubmit" :loading="editLoading">保存</el-button>
      </div>
    </el-dialog>

	</section>
</template>

<script>
export default {
  data() {
    return {
      Menus:[],

      /*模态框排序*/
      num: 1,

      filters: {
        name: ''
      },

      //分页查询 - 总数量 - 计算分页栏
      totals: 0,
      //分页查询 - 当前页 - 计算分页栏
      currentPage: 1,
      //分页查询 - 每页显示的条数 - 分页栏显示页数
      pageSize: 5,

      listLoading: false,

      keywords:[],

      sels: [],//列表选中列

      menuTree:[],


      //添加或修改数据
      title:"",

      editFormVisible: false,//编辑界面是否显示
      editLoading: false,

      //校验规则
      editFormRules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        index: [
          { required: true, message: '请输入排序索引', trigger: 'blur' }
        ],
        url: [
          { required: true, message: '请输入访问路径', trigger: 'blur' }
        ],
        component: [
          { required: true, message: '请输入组件路径', trigger: 'blur' }
        ]
      },
      //编辑界面数据
      editForm: {
        name: null,
        component:null,
        url:null,
        icon:null,
        index:1,
        parent_id:null,
        intro:null,
        state:0
      }
    }
  },


  methods: {

    // 查询部门数
    getMenuTree(){
      this.$http.get("/menu/menuTree")
          .then(res=>{ // 后台返回一个list
            this.menuTree = res.data;

          }).catch(res=>{

      })
    },

    /*模态框中排序*/
    handleChange(value) {
      console.log(value);
    },


    //高级查询的查询按钮绑定事件 跳转到第一页开始查询
    keywordQuery(){
      this.currentPage = 1;
      this.getMenus();
    },

    //点击实现分页查询方法
    currentChange(currentPage) {
      this.currentPage = currentPage;
      this.getMenus();

    },
/****************************************************/
    //获取类型列表
    getMenus() {
      let para = {
        currentPage: this.currentPage,
        pageSize:this.pageSize,
        //高级查询参数 - 关键字
        keywords: this.filters.name
      };
      //开启忙等框
      this.listLoading = true;
      //发送请求
      this.$http.post("/menu",para)
          .then(res=>{
            //发送成功
            this.totals=res.data.totals;
            this.Menus=res.data.data;
            //关闭忙等框
            this.listLoading = false;

          }).catch(res=>{
        this.$message.error("系统繁忙，请稍后重试！！")
      })

    },

    //删除
    handleDel: function (index, row) {
      this.$confirm('确认删除该记录吗?', '温馨提示', {
        menu: 'warning'
      }).then(() => {
        //开启忙等框
        this.listLoading = true;
        this.$http.delete("/menu/"+row.id)
            .then(res=>{
              //关闭忙等框
              this.listLoading = false;
              if(res.data.success){
                this.$message({
                  message: '删除成功',
                  menu: 'success'
                });
              }else {
                this.$message({
                  message: res.data.msg,
                  menu: 'error'
                });
              }
              //刷新页面之前跳转到第一页
              this.currentPage=1;
              //刷新页面
              this.getMenus();
            }).catch(res=>{
              this.$message({
                message: "系统繁忙，请稍后重试！！",
                menu: 'error'
              });
             })
      }).catch(() => {
      });
    },


    //编辑
    //显示编辑界面
    handleEdit: function (index, row) {
      //弹出模态框
      this.editFormVisible = true;
      this.getMenuTree();
      this.title="编辑";
      // 克隆  回显数据
      this.editForm = Object.assign({}, row);
    },


    //显示新增界面
    handleAdd: function () {
      //点击添加 弹出模态框
      this.editFormVisible = true;
      this.getMenuTree();
      this.title="新增";
      //清空模态框操作
      this.editForm = {
        name: null,
        component:null,
        url:null,
        icon:null,
        index:1,
        parent:null,
        intro:null,
        state:1
      };

    },

    //点击提交按钮 发送请求
    editSubmit: function () {
      //表单校验
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {

            this.editLoading = true;  // 忙等框
            // 克隆数据
            let para = Object.assign({}, this.editForm);
            // 重para中获取parent  null: 没有选择上级菜单, []： 选了，又删除了  [2,7,18]
            // parent_id    Long
            let arr = para.parent_id; //  null,  []    [2,7,18]  ==>18
            if(arr && arr.length==0){
              // 后台通过Long接收
              para.parent_id=null;
            }
            if(arr && arr.length > 0){
              // 后台通过Long接收
              para.parent_id=arr[arr.length-1];
            }

            //发送请求
            this.$http.put("/menu",para)
                .then(res=>{
                  //关闭忙等框
                  this.editLoading = false;
                  //关闭模态框
                  this.editFormVisible = false;
                  if(res.data.success){
                    this.$message({
                      message: '操作成功！',
                      menu: 'success'
                    });
                  }else {
                    this.$message({
                      message: res.data.msg,
                      menu: 'error'
                    });
                  }
                  //刷新页面
                  this.getMenus();
                }).catch(res=>{
                  this.$message({
                    message: "系统繁忙，请稍后重试！！",
                    menu: 'error'
                  });
                  //刷新
                 this.getMenus();

                })

          });
        }
      });
    },

    //批量删除的参数
    selsChange: function (sels) {
      this.sels = sels;
    },
    //批量删除
    batchRemove: function () {
      var ids = this.sels.map(item => item.id)//id组成的数组[1,2,3,4]
      this.$confirm('确认删除选中记录吗？', '温馨提示', {
        menu: 'warning'
      }).then(() => {
        this.listLoading = true;
        this.$http.patch("/menu",ids)
            .then(res=>{
              //关闭忙等框
              this.listLoading = true;
              if(res.data.success){
                this.$message({
                  message: '删除成功',
                  menu: 'success'
                });
              }else {
                this.$message({
                  message: res.data.msg,
                  menu: 'error'
                });
              }
              //操作完 跳转到第一页并刷新
              this.currentPage=1;
              this.getMenus();
            }).catch(res=>{
                this.$message({
                  message: "系统繁忙，请稍后重试！！",
                  menu: 'error'
                });
            })
      }).catch(() => {

      });
    }
  },

  mounted() {
    this.getMenus();
  }
}

</script>

<style scoped>

</style>